<template>
    <div>
        <van-nav-bar
        title="注册"
        left-text="返回"
        @click-left="proxy.$leftClick()"
      />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field label-width="50px" v-model="username" name="username" label="电话" placeholder="电话"
                    :rules="[{ validator, message: '请填写正确的电话' }]" size="large" />

                <van-field v-model="sms" name="yzm" center clearable label="验证码" placeholder="请输入短信验证码" size="large" :rules="[{ required: true, message: '请填写验证码' }]"
                    label-width="50px">
                    <template #button>
                        <van-button size="small" type="primary" @click="getYZM">发送验证码</van-button>
                    </template>
                </van-field>
                <van-field label-width="50px" v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" size="large" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" class="btns">
                    提交
                </van-button>
            </div>
        </van-form>

        <div class="as">
            已有账号?
            <a @click="denglu">去登录</a>
        </div>
    </div>

</template>

<script setup lang="ts">
    import {yzm,dbYzm,zhuce,dbZC} from '../api/user'
    import {
        ref,
        getCurrentInstance
    } from 'vue'
    import { useRouter } from 'vue-router';
    const {proxy}:any = getCurrentInstance()
    let router = useRouter();
    // 电话
    const username = ref("");
    // 验证码
    const sms = ref("");

    let yzmData=0;
    // 密码
    const password = ref("");
    // 手机电话号码正则
    const validator = (v:string)=>/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(v);
    // 发送验证码
    const getYZM = async ()=>{
        if(validator(username.value)){
            // 判断是否被注册
            let re = await dbZC(username.value);
            // 进行验证码发送
            let res  = await yzm(username.value);
            yzmData = res.data;
            console.log(yzmData);
        }
    }
    // 当点击注册
    const onSubmit = async (v:{username:string,yzm:string,password:string})=>{
        console.log(v);
        
        // 进行短信验证
        let res = await dbYzm(v.username,v.yzm);
        // 进行注册流程
        let res1 = await zhuce(v.username,v.password);
        // 注册成功弹窗
        alert(res1.message);
        // 调回登录
        router.push({name:'denglu'})
    }
    
    // 当点击登录
    const denglu = ()=>{
        router.push({name:'denglu'})
    }
</script>

<style scoped>

    .btns {
        margin-top: 10px;
        height: 30px;
        font-size: 12px;
        width: 90%;
        margin-left: 5%;
    }

    .as {
        text-align: right;
        padding-right: 10px;
        margin-top: 35px;
        box-sizing: border-box;
        font-size: 13px;
    }

    .as>a {
        color: skyblue;
    }
</style>